<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=620" />
<title>Add Notification</title>
<link rel="stylesheet" type="text/css" href="setting.css" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.14.custom.css" rel="Stylesheet" />	
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="clockFactory.js"></script>
<script type="text/javascript" src="ring.js"></script>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
    <header>
      <h1>Remove  Notifications</h1>
	  <nav>
      <a href="clock.htm" target="_self">Home &nbsp;</a>
      <a href="setting.htm" target="_self">Personalize The Clock  &nbsp;</a>
      <a href="addEvent.htm" target="_self">Add A Notification  &nbsp;</a>
      <a href="removeEvent.htm" target="_self">Remove Notifications &nbsp;</a>
	  <a href="about.htm" target="_self">About &nbsp;</a>
	  </nav>
    </header>
    <article></article>

<h3>One Off Notifications In System</h3>
<table id="oneOffEvents">
<thead>
<tr>
<th scope="col">remove?</th>
<th scope="col">date of the notification(MM/DD/YYYY)</th>
<th scope="col">time of the notification</th>
<th scope="col">note</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><em>select ones you wish to remove</em></td>
</tr>
</tfoot>
<tbody>

<script language="JavaScript">
loadEvents();
for (var i=0; i<oneOffEvents.length; i++)
{
    var id="oneOff|"+i;

    document.write("<tr>");
	document.write("<th>");
	document.write("<input type='checkbox' name='"+id+"' id='"+id+"' value='yes'> ");
	document.write("</th>");
	
	document.write("<th>");
	document.write(oneOffEvents[i][0]);
	document.write("</th>");
	
	document.write("<th>");
	document.write(oneOffEvents[i][1]);
	document.write("</th>");
	
	document.write("<th>");
	document.write(oneOffEvents[i][3]);
	document.write("</th>");
	
	document.write("</tr>");
}
</script>
</tbody>
</table> 

<h3>Daily Notifications In System</h3>
<table id="daily">
<thead>
<tr>
<th scope="col">remove?</th>
<th scope="col">time of the notification</th>
<th scope="col">note</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><em>select ones you wish to remove</em></td>
</tr>
</tfoot>
<tbody>

<script language="JavaScript">
for (var i=0; i<dailyEvents.length; i++)
{
    var id="daily|"+i;

    document.write("<tr>");
	document.write("<th>");
	document.write("<input type='checkbox' name='"+id+"' id='"+id+"' value='yes'> ");
	document.write("</th>");
	
	document.write("<th>");
	document.write(dailyEvents[i][0]);
	document.write("</th>");

	document.write("<th>");
	document.write(dailyEvents[i][2]);
	document.write("</th>");
	
	document.write("</tr>");
}
</script>
</tbody>
</table>

<h3>Monthly Notifications In System</h3>
<table id="monthly">
<thead>
<tr>
<th scope="col">remove?</th>
<th scope="col">date of the month</th>
<th scope="col">note</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><em>select ones you wish to remove</em></td>
</tr>
</tfoot>
<tbody>

<script language="JavaScript">
for (var i=0; i<monthlyEvents.length; i++)
{
    var id="monthly|"+i;

    document.write("<tr>");
	document.write("<th>");
	document.write("<input type='checkbox' name='"+id+"' id='"+id+"' value='yes'> ");
	document.write("</th>");
	
	document.write("<th>");
	//document.write(monthlyEvents[i][0]);
	var att=[];
	att=monthlyEvents[i][0].split("/");
	//get date of month
	document.write(att[1]);
	document.write("</th>");

	document.write("<th>");
	document.write(monthlyEvents[i][2]);
	document.write("</th>");
	
	document.write("</tr>");
}
</script>
</tbody>
</table>

<h3>Yearly Notifications In System</h3>
<table id="yearly">
<thead>
<tr>
<th scope="col">remove?</th>
<th scope="col">date of the notification(MM/DD)</th>
<th scope="col">note</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5"><em>select ones you wish to remove</em></td>
</tr>
</tfoot>
<tbody>

<script language="JavaScript">
for (var i=0; i<yearlyEvents.length; i++)
{
    var id="yearly|"+i;

    document.write("<tr>");
	document.write("<th>");
	document.write("<input type='checkbox' name='"+id+"'id='"+id+"' value='yes'> ");
	document.write("</th>");
	
	document.write("<th>");
	var att=[];
	att=yearlyEvents[i][0].split("/");
	//get date of month
	document.write(att[0]+"/"+att[1]);
	document.write("</th>");

	document.write("<th>");
	document.write(yearlyEvents[i][2]);
	document.write("</th>");
	
	document.write("</tr>");
}
</script>
</tbody>
</table>

<button type="button" onclick="remove()">remove events	</button>
<button type="button" onclick="back()">back to clock without change</button>

<script language="JavaScript">
function remove()
{
    var oneOffData="";
	var dailyData="";
    var monthlyData="";
    var yearlyData="";

    for (var i=0; i<oneOffEvents.length; i++)
    {
        var id="oneOff|"+i;
        if(document.getElementById(id).checked==false)
        {		
	        oneOffData=oneOffData+oneOffEvents[i][0]+"|"+oneOffEvents[i][1]+"|"+oneOffEvents[i][2]+"|"+oneOffEvents[i][3]+"$";
		}
    }
	
	for (var i=0; i<dailyEvents.length; i++)
    {
        var id="daily|"+i;
        if(document.getElementById(id).checked==false)
        {		
	        dailyData=dailyData+dailyEvents[i][0]+"|"+dailyEvents[i][1]+"|"+dailyEvents[i][2]+"$";
		}
    }
	
	for (var i=0; i<monthlyEvents.length; i++)
    {
        var id="monthly|"+i;
        if(document.getElementById(id).checked==false)
        {		
	        monthlyData=monthlyData+monthlyEvents[i][0]+"|"+monthlyEvents[i][1]+"|"+monthlyEvents[i][2]+"$";
		}
    }
	
	for (var i=0; i<yearlyEvents.length; i++)
    {
        var id="yearly|"+i;
        if(document.getElementById(id).checked==false)
        {		
	        yearlyData=yearlyData+yearlyEvents[i][0]+"|"+yearlyEvents[i][1]+"|"+yearlyEvents[i][2]+"$";
		}
    }

	//write to cookies
	setCookie("daily", dailyData, 3600);
	setCookie("oneOff", oneOffData, 3600);
    setCookie("monthly", monthlyData, 3600);
	setCookie("yearly", yearlyData, 3600);


    alert("select events remove from system!");
	window.location = "clock.htm";
}
function back()
{
    window.location = "clock.htm";
}
</script>

<footer>page powered by <img src="icons/HTML5_Logo_32.png" alt="HTML5"/></footer>

</body>
</html>